<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="primary" @click="addRole">
            添加角色
        </el-button>
        <el-table :data="rolelist" border stripe>
            <el-table-column type="expand">
                <template #default="scope">
                    <el-row v-for="(item1,index1) in scope.row.children" :key="index1" :class="['bdbottom',index1===0?'bdtop':'']">
                        <el-col :span="5">
                            <el-tag>{{item1.authName}}</el-tag>
                            <i class="el-icon-caret-right"></i>
                        </el-col>
                        <el-col :span="19">
                            <el-row v-for="(item2,index2) in item1.children" :key="index2">
                                <el-col :span="6">
                                    <el-tag type="success">{{item2.authName}}</el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </el-col>
                                <el-col :span="18">
                                    <el-tag type="warning" v-for="(item3,index3) in item2.children" :key="index3">{{item2.authName}}</el-tag>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="角色名称" prop="roleName"></el-table-column>
            <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
            <el-table-column label="操作" prop="level">
                <template #default="scope">
                    <el-button type="primary" @click="handleClick(scope.row)" icon="el-icon-edit"></el-button>
                    <el-button type="danger" icon="el-icon-delete"></el-button>
                    <el-tooltip effect="dark" content="分配角色" placement="top">
                        <el-button type="warning" icon="el-icon-setting"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data () {
        return {
            rolelist: []
        }
    },
    created () {
        this.getRolesList()
    },
    methods: {
        addRole () { },
        async getRolesList () {
            const { data: res } = await this.$http.get('roles')
            if (res.meta.status !== 200) return this.$message.error('获取角色列表错误')
            console.log('获取角色列表', res);
            this.rolelist = res.data
        }
    }
}
</script>

<style lang="less" scoped>
.el-button {
    margin-top: 15px;
}
.el-table {
    margin-top: 15px;
    .el-tag {
        margin: 7px;
    }
    .bdtop {
        border-top: 1px solid #eee;
    }
    .bdbottom {
        border-bottom: 1px solid #eee;
    }
}
</style>